0
239
ViewsHow to display events from "selectable" multiple calendars using FullCalendar React?
I have a "simple" React App that allow a user to select/unselect calendars to display in a @FullCalendar/React component. The app loads a list of calendars from the server, and then the user may select or unselect calendars - and the FullCalender component should update accordingly.
Below is a simplified version on Codesandbox with simulated server fetches. You'll notice it loads correctly, but FullCalendar doesn't update as calendars are selected. In the console, you can see the data is being updated, but not re-rendered in the calendar display.
The component that is causing the issues is CalendarDisplay. When render() is called again to update the display, the events={this._fetchEvents} handle is not called. Instead I'm wondering if I should use something like events={this.state.events} but then I run into the issue of knowing what date range FullCalendar is displaying.
/**
* Display FullCalendar componenent with events from the selected calendars
*/
class CalendarDisplay extends Component {
constructor(props) {
super(props);
this.state = {
// not used
events: []
};
}
render() {
console.log("Rendering FullCalendar...");
return (
<FullCalendar
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
events={this._fetchEvents}
/>
);
}
_fetchEvents = (info, successCallback, failureCallback) => {
// Loop through props.calendars to see which calendars to fetch events for
this.props.calendars.forEach((calendar) => {
// Fetch events for calendar if "shown" using date range from FullCalendar
if (calendar.shown) {
let events = fetchEventsFromServer(
calendar.id,
info.start.valueOf(),
info.end.valueOf()
);
// Load into FullCalendar
successCallback(events);
}
});
};
}
1 answers
Answer question0
It turns out the way to do this is to make use of the FullCalendar EventSource api and update the event sources after the component is mounted or updated. A working example is at the CodeSandbox below and the relavent code is posted below as well.
class CalendarDisplay extends Component {
calendarRef = createRef();
componentDidUpdate(prevProps) {
this._fetchEvents();
}
componentDidMount() {
this._fetchEvents();
}
/**
* The trick is to render the FulCalendar with no events
* and use the EventSource api after the component mounts
* or updates
*/
render() {
return (
<FullCalendar
ref={this.calendarRef}
plugins={[dayGridPlugin]}
initialView="dayGridMonth"
/>
);
}
/**
* Method to add/remove EventSources when the components props
* update (Calendars are selected/unslected)
*/
_fetchEvents() {
// Loop through props.calendars to see which calendars are selected
this.props.calendars.forEach((calendar) => {
let calendarApi = this.calendarRef.current.getApi();
let eventSource = calendarApi.getEventSourceById(calendar.id);
// Remove if present and unselected
if (eventSource && !calendar.shown) {
console.log("Removing EventSource. CalendarId: " + calendar.id);
eventSource.remove();
// Add if selected and not present
} else if (calendar.shown && !eventSource) {
calendarApi.addEventSource({
id: calendar.id,
events: function (info, successCallback, failureCallback) {
// Here is where you would place your ajax() call
let events = fetchEventsFromServer(
calendar.id,
info.start.valueOf(),
info.end.valueOf()
);
// Load into FullCalendar
successCallback(events);
}
});
}
});
}
}